<template>
  <div>
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>视频
        <small v-if="item.id">编辑视频</small>
        <small v-else>新建视频</small>
      </h1>
      <ol class="breadcrumb">
        <li>
          <router-link to="/"><i class="fa fa-dashboard"></i> 总览</router-link>
        </li>
        <li>
          <router-link to="/video">视频管理</router-link>
        </li>
        <li class="active" v-if="item.id">编辑视频</li>
        <li class="active" v-else>新建视频</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">

      <div class="box box-primary">
        <!--<div class="box-header with-border">-->
        <!--</div>-->
        <!-- /.box-header -->
        <!-- form start -->
        <div class="box-body">

          <form class="form-horizontal" @submit="onSave">
            <div class="form-group" :class="{'has-error': item.$errors.has('title')}">
              <label for="field-title" class="col-sm-2 control-label">标题</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="field-title" v-model="item.title">
                <span class="help-block" v-if="item.$errors.has('title')">{{item.$errors.get('title')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('category_id')}">
              <label for="field-category_id" class="col-sm-2 control-label">分类</label>
              <div class="col-sm-10">
                <v-select class="form-control" id="field-category_id" style="width: 100%;"
                          placeholder="请选择分类"
                          v-model="item.category_id" :options="[]">
                </v-select>
                <span class="help-block"
                      v-if="item.$errors.has('category_id')">{{item.$errors.get('category_id')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('compilation_id')}">
              <label for="field-compilation_id" class="col-sm-2 control-label">所属合辑</label>
              <div class="col-sm-10">
                <v-select class="form-control" id="field-compilation_id" style="width: 100%;"
                          placeholder="请选择所属合辑"
                          v-model="item.compilation_id" :options="[]">
                </v-select>
                <span class="help-block" v-if="item.$errors.has('compilation_id')">{{item.$errors.get('compilation_id')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('tags')}">
              <label for="field-tags" class="col-sm-2 control-label">标签</label>
              <div class="col-sm-10">
                <v-select class="form-control" id="field-tags" multiple="multiple" style="width: 100%;"
                          placeholder="请选择标签"
                          v-model="item.tags" :options="[]">
                </v-select>
                <span class="help-block" v-if="item.$errors.has('tags')">{{item.$errors.get('tags')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('description')}">
              <label for="field-description" class="col-sm-2 control-label">简介</label>
              <div class="col-sm-10">
                <textarea type="text" class="form-control" id="field-description" v-model="item.description"></textarea>
                <span class="help-block"
                      v-if="item.$errors.has('description')">{{item.$errors.get('description')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('from')}">
              <label for="field-from" class="col-sm-2 control-label">来源</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="field-from" v-model="item.from">
                <span class="help-block" v-if="item.$errors.has('from')">{{item.$errors.get('from')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('cover_id')}">
              <label for="field-cover_id" class="col-sm-2 control-label">封面</label>
              <div class="col-sm-10">
                <upload-file class="form-control" id="field-cover_id" v-model="item.cover_id"></upload-file>
                <span class="help-block" v-if="item.$errors.has('cover_id')">{{item.$errors.get('cover_id')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('source')}">
              <label for="field-source" class="col-sm-2 control-label">片源地址</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="field-source" v-model="item.source">
                <span class="help-block" v-if="item.$errors.has('source')">{{item.$errors.get('source')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('user_id')}">
              <label for="field-user_id" class="col-sm-2 control-label">上传者</label>
              <div class="col-sm-10">
                <v-select class="form-control" id="field-user_id" style="width: 100%;"
                          placeholder="请选择上传者"
                          v-model="item.user_id" :options="[]">
                </v-select>
                <span class="help-block" v-if="item.$errors.has('user_id')">{{item.$errors.get('user_id')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('members')}">
              <label for="field-members" class="col-sm-2 control-label">制作团队</label>
              <div class="col-sm-10">
                <v-select class="form-control" id="field-members" multiple="multiple" style="width: 100%;"
                          placeholder="请选择制作团队"
                          v-model="item.members" :options="[]">
                </v-select>
                <span class="help-block" v-if="item.$errors.has('members')">{{item.$errors.get('members')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('visible_purview')}">
              <label for="field-visible_purview" class="col-sm-2 control-label">播放权限</label>
              <div class="col-sm-10">
                <label class="radio-inline"><input type="radio" id="field-visible_purview-1" value="1"
                                                   v-model="item.visible_purview">公开</label>
                <label class="radio-inline"><input type="radio" id="field-visible_purview-2" value="2"
                                                   v-model="item.visible_purview">会员专属</label>
                <span class="help-block" v-if="item.$errors.has('visible_purview')">{{item.$errors.get('visible_purview')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('released_at')}">
              <label for="field-released_at" class="col-sm-2 control-label">发布时间</label>
              <div class="col-sm-10">
                <div class="input-group date">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <datepicker class="form-control" id="field-released_at"
                              v-model="item.released_at"></datepicker>
                </div>
                <span class="help-block"
                      v-if="item.$errors.has('released_at')">{{item.$errors.get('released_at')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('funding_id')}">
              <label for="field-funding_id" class="col-sm-2 control-label">众筹项目</label>
              <div class="col-sm-10">
                <v-select class="form-control" id="field-funding_id" style="width: 100%;"
                          placeholder="请选择众筹项目"
                          v-model="item.funding_id" :options="[]">
                </v-select>
                <span class="help-block" v-if="item.$errors.has('funding_id')">{{item.$errors.get('funding_id')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('note')}">
              <label for="field-note" class="col-sm-2 control-label">视频注释</label>
              <div class="col-sm-10">
                <textarea type="text" class="form-control" id="field-note" v-model="item.note"></textarea>
                <span class="help-block" v-if="item.$errors.has('note')">{{item.$errors.get('note')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('year')}">
              <label for="field-year" class="col-sm-2 control-label">年份</label>
              <div class="col-sm-10">
                <input type="number" class="form-control" id="field-year" v-model="item.year">
                <span class="help-block" v-if="item.$errors.has('year')">{{item.$errors.get('year')}}</span>
              </div>
            </div>
            <div class="form-group" :class="{'has-error': item.$errors.has('region')}">
              <label for="field-region" class="col-sm-2 control-label">产地</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="field-region" v-model="item.region">
                <span class="help-block" v-if="item.$errors.has('region')">{{item.$errors.get('region')}}</span>
              </div>
            </div>

            <div class="form-group" :class="{'has-error': item.$errors.has('like_count')}">
              <label for="field-like_count" class="col-sm-2 control-label">被赞次数</label>
              <div class="col-sm-10">
                <input type="number" class="form-control" id="field-like_count" v-model="item.like_count">
                <span class="help-block" v-if="item.$errors.has('like_count')">{{item.$errors.get('like_count')}}</span>
              </div>
            </div>

          </form>
        </div>
        <!-- /.box-body -->

        <div class="box-footer">
          <router-link to="/video" class="btn btn-lg btn-flat btn-default pull-left">返回</router-link>
          <button type="submit" form="editing-form" class="btn btn-lg btn-flat btn-primary" @click="onSave"
                  :disabled="saving">
            {{saving?"保存中...":"保存"}}
          </button>
        </div>
      </div>

    </section>
    <!-- /.content -->
  </div>
</template>

<script type="javascript">
  import {Vue} from 'resources/assets/js/commons/vuejs.js';
  import {alert} from 'resources/assets/js/components/SweetAlertDialogs';
  import ErrorsBuilder from 'resources/assets/js/commons/ErrorsBuilder.js';

  var resourceURL = "/video";
  var resource = Vue.resource(resourceURL + '{/id}');
  // var resource = Vue.resource(resourceURL + '{/id}?_with=permissions,roles'); // 载入额外的关联数据(relationships)
  var vueConfig = {
    data: function () {
      var data = {
        item: {
          "id": null,
          "title": "",
          "category_id": null,
          "compilation_id": null,
          "tags": [],
          "description": null,
          "from": "\u539f\u521b",
          "cover_id": "",
          "source": "",
          "user_id": null,
          "members": [],
          "visible_purview": 1,
          "released_at": "",
          "funding_id": "",
          "note": "",
          "year": "",
          "region": "",
          "like_count": 0
        },
        saving: false
      };
      data.item.$errors = ErrorsBuilder();
      return data;
    },
    beforeRouteEnter (to, from, next) {
      if (to.params.id) {
        resource.get({id: to.params.id}).then(function (result) {
          next(function (vm) {
            vm.item = result.data.data;
            vm.item.$errors = ErrorsBuilder();
          })
        }).catch(function (err) {
          next(false);
        });
      }
      else {
        next();
      }
    },
    methods: {
      onSave: function (event) {
        this.saving = true;
        this.item.$errors.removeAll();

        var promise = null;
        let payload = $.extend(true, {}, this.item);
        if (payload.id) {
          promise = resource.update({id: payload.id}, payload).then(function (result) {
            window.toastr["success"]("编辑已保存");
            return result.data.data;
          });
        }
        else {
          promise = resource.save(payload).then(function (result) {
            window.toastr["success"]("新增成功");
            return result.data.data;
          });
        }

        promise.then(function (data) {
          return resource.get({id: data.id});
        }).then(function (result) {
          this.saving = false;
          this.item = result.data.data;
          this.item.$errors = ErrorsBuilder();
        }.bind(this)).catch(function (err) {
          this.saving = false;
          if (err.status == 422) {
            this.item.$errors.setAll(err.body);
          }
          else {
            alert(err.data.message);
          }
        }.bind(this));

        return false;
      },
    }
  };
  export default vueConfig;

</script>

<style lang="scss">

</style>
